<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        修改医生信息
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/main.css" media="all">
    <script type="text/javascript" src="../lib/loading/okLoading.js"></script>
    <style>
        .imgs{display: none;}
        .image-container {
            max-width: 200px; /* 设置最大宽度 */
            max-height: 300px; /* 设置最大高度 */
        }
        .image-container img {
            width: 100%; /* 图像宽度设置为容器宽度的百分百 */
            height: 100%; /* 图像高度自适应 */
        }
    </style>

</head>
<body>
<div class="x-body" id="app">
    <form class="layui-form layui-form-pane" action="" id="add">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content" >
                <div class="layui-tab-item layui-show">
                    <input type="hidden" name="id" value="">
                    <div class="layui-form-item">
                        <div class="image-container">
                            <img :src="docUrl" alt="Image">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>老人ID
                        </label>
                        <div class="layui-input-block">
                            <input type="text"  name="households" autocomplete="off" placeholder="请输入" readonly
                                   class="layui-input"value="" v-model="docId" @input="getUser">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>名称
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="households" autocomplete="off" placeholder="请输入"
                                   class="layui-input" value="" v-model="docName">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" >
                            <span class='x-red'>*</span>年龄
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="buildings_name" autocomplete="off" placeholder="请输入"
                                   class="layui-input" required="" lay-verify="required" value="" v-model="docJob">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>电话
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="households" autocomplete="off" placeholder="请输入"
                                   class="layui-input" value="" v-model="docTitle">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>紧急联系人
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="households" autocomplete="off" placeholder="请输入"
                                   class="layui-input" value="" v-model="docExcel">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>健康系数
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="households" autocomplete="off" placeholder="请输入"
                                   class="layui-input" value="" v-model="docSalary">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" type="button" lay-filter="add" lay-submit="" @click="update()">
                        修改
                    </button>
                    <button class="layui-btn" type="button" lay-filter="add" lay-submit="" @click="uploadImage()">
                        更新头像
                    </button>
                    <input type="file" id="select" @change="changeImg()">
                </div>
                <div style="height:100px;"></div>
            </div>

        </div>
    </form>
</div>
</form>
</div>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="../js/x-layui.js" charset="utf-8"></script>
<script>
    layui.use(['element','layer','form'], function(){
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        form = layui.form();
        okLoading.close($);

        //监听提交
        form.on('submit(add)', function(data){
            var buildings_name=$("input[name='buildings_name']").val();
            var households=$("input[name='households']").val();
            if(buildings_name==""){
                layer.msg('栋数名称不能为空！',{icon:5,time:2000});return false;
            }
            if(households==""){
                layer.msg('总户数不能为空！',{icon:5,time:2000});return false;
            }
            var data = data.field;
            $.ajax({
                type:"post",
                url:"xxx",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.info, {icon: 6,time:2000},function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                        return false;
                    }
                    else{
                        layer.msg(data.info,{icon:5,time:2000});return false;
                    }
                }

            });

        });

    })
</script>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script type="text/javascript" src="../js/vue/qs.js"></script>
<script type="text/javascript" src="../js/vue/axios.js"></script>

<script type="text/javascript">
    let vm = new Vue({
        el : "#app",
        data:{
            account : '',
            id: '',
            docName:'',
            docJob:'',
            docTitle:'',
            docExcel:'',
            docSalary:'',
            docTel:'',
            docUrl:'',
            doctorId : [],
            doctor : []
        },
        mounted(){
            axios.post(`getOldByAccount/${location.href.substring(98)}`).then(res=>{
                this.doctorId = res.data.data;
                console.log(res.data);

                // 处理获取到的用户数据
                this.docName = res.data.name; // 假设响应数据包含名字属性
                this.docJob = res.data.age;
                this.docTitle = res.data.tel;
                this.docExcel = res.data.familyTel;
                this.docSalary = res.data.health;
                this.docId = res.data.id;
                this.docUrl = res.data.url;
            })
        },
        methods : {
            update(){
                axios.post("updateOld",qs.stringify({id:this.docId,name:this.docName,age:this.docJob,tel:this.docTitle
                    ,familyTel:this.docExcel,health:this.docSalary})).then( res =>{
                    if(res.data == "更新成功"){
                        alert("更新成功")
                    }else {
                        alert("更新失败")
                    }
                    console.log(res);
                })
            },
            getUser() {
                if (this.id) {
                    axios.post(`doctor/getDocById/${this.id}`)
                        .then(response => {


                            console.log(response.data)
                        })
                        .catch(error => {
                            // 处理请求错误
                        });
                }
            },
            changeImg(){
                let that = this;
                //新建文件读取对象
                let reader = new FileReader();
                //读取上传的图片
                reader.readAsDataURL(document.getElementById("select").files[0]);
                //加载
                reader.onload = function (){
                    //将加载的值赋值给缩略图src
                    that.urls = this.result;
                }
            },
            uploadImage() {
                console.log('/common/uploadImage');
                let formData = new FormData();
                formData.append('imageFile', document.getElementById("select").files[0]);
                formData.append('account', 'oldChen');
                axios.post('/common/uploadImage', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    console.log('上传成功');
                    window.location.reload(); // 刷新页面
                }).catch(error => {
                    console.log('上传失败');
                });
            }
        }
    })
</script>

</body>
</html>